﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>Cloud Admin | Login</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- STYLESHEETS --><!--[if lt IE 9]><script src="js/flot/excanvas.min.js"></script><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->
    <link rel="stylesheet" type="text/css" href="resources/home/css/cloud-admin.css" >

    <link href="resources/home/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <!-- DATE RANGE PICKER -->
    <link rel="stylesheet" type="text/css" href="resources/home/js/bootstrap-daterangepicker/daterangepicker-bs3.css" />
    <!-- UNIFORM -->
    <link rel="stylesheet" type="text/css" href="resources/home/js/uniform/css/uniform.default.min.css" />
    <!-- ANIMATE -->
    <link rel="stylesheet" type="text/css" href="resources/home/css/animatecss/animate.min.css" />
    <!-- FONTS -->
    <!-- <link href='http://fonts.useso.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'> -->
</head>
<body class="login">
    <!-- PAGE -->
    <section id="page">
            <!-- HEADER -->
            <header>
                <!-- NAV-BAR -->
                <div class="container">
                    <div class="row">
                        <div class="col-md-4 col-md-offset-4">
                            <div id="logo">
                                <a href="login.php"><img src="resources/home/img/logo/logo.png" height="40" alt="logo name" /></a>
                            </div>
                        </div>
                    </div>
                </div>
                <!--/NAV-BAR -->
            </header>
            <!--/HEADER -->
            <!-- LOGIN -->
            <section id="login_bg" class="visible">
                <div class="container">
                    <div class="row">
                        <div class="col-md-4 col-md-offset-4">
                            <div class="login-box">
                                <h2 class="bigintro">用户登录</h2>
                                <div class="divide-40"></div>
                                <form role="form" action="index.php?home=1&a=login&c=user" method="post">
                                  <div class="form-group">
                                    <label for="exampleInputEmail1">用户名</label>
                                    <i class="fa fa-envelope"></i>
                                    <input type="text" value="<?php echo (!empty ($_COOKIE['userName']))?$_COOKIE['userName']:''; ?>"  name="userName" class="form-control" id="exampleInputEmail1" >
                                  </div>
                                  <div class="form-group">
                                    <label for="exampleInputPassword1">密码</label>
                                    <i class="fa fa-lock"></i>
                                    <input type="password" value="<?php echo (!empty($_COOKIE['userPassword']))?$_COOKIE['userPassword']:''; ?>" name="userPassword" class="form-control" id="exampleInputPassword1" >
                                  </div>


                                  <div class="form-group">
                                    <label for="exampleInputPassword1">验证码</label>
                                    <i class="fa fa-lock"></i>
                                    <input type="text" value="" name="code" class="form-control" id="exampleInputPassword1" >
                                     <img src="index.php?c=user&a=code&home=1" alt="">
                                  </div>

                                    <div>
                                    <label class="checkbox"> <input id="check"  type="checkbox" <?php echo (!empty($_COOKIE['userName']))?'checked':''; ?>  name="check" class="uniform" value="1">记住我</label>

                                    <label class="checkbox" > <input id="auto" type="checkbox" <?php echo (!empty($_COOKIE['auto_login']))?'checked':''; ?> name="auto" class="uniform" value="1">自动登录</label>

                                    <button type="submit" class="btn btn-danger">登录</button>
                                  </div>
                                </form>
                                <!-- SOCIAL LOGIN -->
                                <div class="divide-20"></div>
                                <div class="center">
                                    <strong>其他登录方式</strong>
                                </div>
                                <div class="divide-20"></div>
                                <div class="social-login center">
                                    <a class="btn btn-primary btn-lg">
                                        <i class="fa fa-facebook"></i>
                                    </a>
                                    <a class="btn btn-info btn-lg">
                                        <i class="fa fa-twitter"></i>
                                    </a>
                                    <a class="btn btn-danger btn-lg">
                                        <i class="fa fa-google-plus"></i>
                                    </a>
                                </div>
                                <!-- /SOCIAL LOGIN -->
                                <div class="login-helpers">
                                    <a href="#" onclick="swapScreen('forgot_bg');return false;">忘记密码?</a> <br>
                                    没有账号? <a href="index.php?&home=1&c=user&a=register" onclick="swapScreen('register_bg');return false;">注册</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!--/LOGIN -->
            <!-- REGISTER -->
            <section id="register_bg" class="font-400">
                <div class="container">
                    <div class="row">
                        <div class="col-md-4 col-md-offset-4">
                            <div class="login-box">
                                <h2 class="bigintro">用户注册</h2>
                                <div class="divide-40"></div>
                                <form  name="from_register" class="form-horizontal" action="index.php?home=1&a=register&c=user" method="post" role="form">
                                  <div class="form-group">
                                    <label for="exampleInputUsername">用户名</label>
                                    <i class="fa fa-user"></i>
                                    <input  type="text" id="userName" name="userName" class="form-control" id="exampleInputUsername" placeholder="请输入用户名">
                                    <span class="prompt_userName">2~10个字符,支持文字、数字和字母</span>
                                  </div>
                                  <div class="form-group">
                                    <label for="exampleInputPassword1">密码</label>
                                    <i class="fa fa-lock"></i>
                                    <input type="password" name="userPassword" class="form-control" id="exampleInputPassword1"  placeholder="请输入密码">
                                    <span class="prompt_userPassword">6~16个字母或数字，区分大小写</span>
                                  </div>

                                 <div class="form-group">
                                    <label for="exampleInputEmail1">Email</label>
                                    <i class="fa fa-envelope"></i>
                                    <input onblur="return check()" type="email" name="userEmail" class="form-control" id="exampleInputEmail1"  placeholder="请输入邮箱">
                                     <span class="prompt_userEmail">6~18个字符，可使用字母、数字、下划线</span>
                                  </div>

                                  <div>
                                    <label class="checkbox"> <input type="checkbox" class="uniform" value=""> 我同意 <a href="#">服务条款</a> 和 <a href="#">隐私政策</a></label>
                                    <button type="submit" onclick="return check()" class="btn btn-success">注册</button>
                                  </div>
                                </form>
                                SOCIAL REGISTER
                                <div class="divide-20"></div>
                                <div class="center">
                                    <strong>其他注册方式</strong>
                                </div>
                                <div class="divide-20"></div>
                                <div class="social-login center">
                                    <a class="btn btn-primary btn-lg">
                                        <i class="fa fa-facebook"></i>
                                    </a>
                                    <a class="btn btn-info btn-lg">
                                        <i class="fa fa-twitter"></i>
                                    </a>
                                    <a class="btn btn-danger btn-lg">
                                        <i class="fa fa-google-plus"></i>
                                    </a>
                                </div>
                                /SOCIAL REGISTER
                                <div class="login-helpers">
                                    <a href="index.php?&home=1&c=user&a=login" onclick="swapScreen('login_bg');return false;"> 返回登录</a> <br>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!--/REGISTER -->
            <!-- FORGOT PASSWORD -->
            <section id="forgot_bg">
                <div class="container">
                    <div class="row">
                        <div class="col-md-4 col-md-offset-4">
                            <div class="login-box">
                                <h2 class="bigintro">Reset Password</h2>
                                <div class="divide-40"></div>
                                <form role="form">
                                  <div class="form-group">
                                    <label for="exampleInputEmail1">Enter your Email address</label>
                                    <i class="fa fa-envelope"></i>
                                    <input type="email" class="form-control" id="exampleInputEmail1" >
                                  </div>
                                  <div>
                                    <button type="submit" class="btn btn-info">Send Me Reset Instructions</button>
                                  </div>
                                </form>
                                <div class="login-helpers">
                                    <a href="#" onclick="swapScreen('login_bg');return false;">Back to Login</a> <br>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- FORGOT PASSWORD -->
    </section>
    <!--/PAGE -->
    <!-- JAVASCRIPTS -->
    <!-- Placed at the end of the document so the pages load faster -->
    <!-- JQUERY -->
    <script src="resources/home/js/jquery/jquery-2.0.3.min.js"></script>
    <!-- JQUERY UI-->
    <script src="resources/home/js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
    <!-- BOOTSTRAP -->
    <script src="resources/home/bootstrap-dist/js/bootstrap.min.js"></script>


    <!-- UNIFORM -->
    <script type="text/javascript" src="resources/home/js/uniform/jquery.uniform.min.js"></script>
    <!-- BACKSTRETCH -->
    <script type="text/javascript" src="resources/home/js/backstretch/jquery.backstretch.min.js"></script>
    <!-- CUSTOM SCRIPT -->
    <script src="resources/home/js/script.js"></script>
    <script>
        $(document).ready(function() {

            //点击图片实现验证码切换
            $('img').click(function() {
               var src=$(this).attr('src');
               src=src+'&'+Math.random()*10;
               $(this).attr('src',src);
            });


            //给自动登录绑定点击事件
            $('#auto').click(function() {
                //如何知道自动登录的多选框已经选中
                if($(this).is(':checked')){//判断当前的自动登录复选框是否选中
                    //让记住我选中
                    $('#check').parent().addClass('checked');//给记住我的span添加选中类
                    //属性抓取方式 找到checkbox标签其中name属性的值等于check的对象
                    $(':checkbox[name=check]').prop('checked', true);//prop()给属性设值
                }
            })
            App.setPage("login_bg");  //Set current page
            App.init(); //Initialise plugins and elements
        });
    </script>
    <!-- <script>
        jQuery(document).ready(function() {
            App.setPage("login_bg");  //Set current page
            App.init(); //Initialise plugins and elements
        });
    </script> -->
    <script type="text/javascript">
        function swapScreen(id) {
            jQuery('.visible').removeClass('visible animated fadeInUp');
            jQuery('#'+id).addClass('visible animated fadeInUp');
        }
    </script>
    <!-- /JAVASCRIPTS -->
</body>
</html>
<script type="text/javascript">
function check() {
    // // 验证用户名
    // var userName=from_register.userName.value;//获取表单form(name=from_register)的input(name=userName)用户名的值
    // var reg_userName=/([0-9]|[a-zA-Z]|[\u4e00-\u9fa5\uf900-\ufa2d]){2,10}/;//正则规则表达式
    // var result_userName=reg_userName.exec(userName);

    // if((userName=="")||(userName==null)){//判断用户名是否为空，为空就弹出提示框"请输入用户名"，否则正常执行下面的代码。
    //    // alert("请输入用户名！");
    //    var html='请输入用户名！';
    //    $('.prompt_userName').html(html);
    //     from_register.userName.focus();//获取焦点，即：鼠标自动定位到用户名输入框，等待用户输入用户名。
    //     return false;
    // }else if(userName.length>10||userName.length<2){//验证字符长度
    //      var html='字数多余10个字符或少于2个字符，请重新输入！';
    //    $('.prompt_userName').html(html);//将html的值替换掉<span class="prompt_userName"></span>中的值
    //     from_register.userName.focus();
    //     return false;
    // }else if(result_userName==null){//输入除字母、数字和汉字之外的字符即提示
    //     var html='仅支持字母、数字或汉字，请重新输入！';
    //    $('.prompt_userName').html(html);
    //     from_register.userName.focus();
    //     return false;
    // }else{//输入正确，则提示
    //      var html='用户名输入正确！';
    //    $('.prompt_userName').html(html);
    //     from_register.userName.focus();

    // }

//用户名验证：第二种方式：获取input的id
    var userName=document.getElementById('userName').value;
    var reg_userName=/([0-9]|[a-zA-Z]|[\u4e00-\u9fa5\uf900-\ufa2d]){2,10}/;//正则规则表达式
    var result_userName=reg_userName.exec(userName);
    if((userName=="")||(userName==null)){//判断用户名是否为空，为空就弹出提示框"请输入用户名"，否则正常执行下面的代码。
       // alert("请输入用户名！");
       var html='请输入用户名！';
       $('.prompt_userName').html(html);
        from_register.userName.focus();//获取焦点，即：鼠标自动定位到用户名输入框，等待用户输入用户名。
        return false;
    }else if(userName.length>10||userName.length<2){//验证字符长度
         var html='字数多余10个字符或少于2个字符，请重新输入！';
       $('.prompt_userName').html(html);//将html的值替换掉<span class="prompt_userName"></span>中的值
        from_register.userName.focus();
        return false;
    }else if(result_userName==null){//输入除字母、数字和汉字之外的字符即提示
        var html='仅支持字母、数字或汉字，请重新输入！';
       $('.prompt_userName').html(html);
        from_register.userName.focus();
        return false;
    }else{//输入正确，则提示
         var html='用户名输入正确！';
       $('.prompt_userName').html(html);
        from_register.userName.focus();

    }

    //验证密码
    var userPassword=from_register.userPassword.value;

    var reg_userPassword=/([0-9]|[a-z]|[A-Z]){6,16}/;
    var result_userPassword=reg_userPassword.exec(userPassword);

    if((userPassword=="")||(userPassword==null)){
       var html='请输入密码！';
       $('.prompt_userPassword').html(html);
        from_register.userPassword.focus();
        return false;
    }
    else if(userPassword.length>16||userPassword.length<6){
      var html='字数多于16个字符或少于6个字符，请重新输入！';
       $('.prompt_userPassword').html(html);
        from_register.userPassword.focus();
        return false;
    }else if(result_userPassword==null){
     var html='仅支持字母和数字，区分大小写！';
       $('.prompt_userPassword').html(html);
        from_register.userPassword.focus();
        return false;
    }else{
         var html='密码输入正确！';
       $('.prompt_userPassword').html(html);
        from_register.userPassword.focus();
    }


     //验证邮箱
    var userEmail=from_register.userEmail.value;

    var reg_userEmail=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
    var result_userEmail=reg_userEmail.exec(userEmail);

    if((userEmail=="")||(userEmail==null)){
       var html='请输入邮箱！';
       $('.prompt_userEmail').html(html);
        from_register.userEmail.focus();
        return false;
    }
    else if(userEmail.length>18||userEmail.length<6){
      var html='字数多于18个字符或少于6个字符，请重新输入！';
       $('.prompt_userEmail').html(html);
        from_register.userEmail.focus();
        return false;
    }else if(result_userEmail==null){
     var html='格式不正确！';
       $('.prompt_userEmail').html(html);
        from_register.userEmail.focus();
        return false;
    }else{
         var html='邮箱格式正确';
       $('.prompt_userEmail').html(html);
        from_register.userEmail.focus();
    }

}
</script>


